<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/realnav2.css" />
    <title>报告</title>
  </head>
  <style>
    body section {
      width: 90%;
      font-family: "楷体";
      font-size: 22px;
      margin: 0 auto;
    }

    tr {
      height: 45px;
    }
    td {
      width: 200px;
      font-size: 22px;
      background-color: antiquewhite;
    }
    span {
      font-size: 27px;
      font-weight: 100;
    }

    section div {
      padding: 6px;
    }
  </style>
  <body>
    <div class="shell-main">
      <div class="shell-main-nav">
        <div class="logo">
          <img src="img/hyy.jpg" alt="找不到啦" />
          <span>小胡的期末作业</span>
        </div>
        <ul>
          <li><a href="./index.html">新海诚</a></li>
          <li><a href="./图片小展.html">图片小展</a></li>
          <li><a href="./国王排名.html">国王排名</a></li>
          <li><a href="longmao.html">龙猫</a></li>
          <li class="dropdown">
            <a href="">More</a>
            <div class="dropdown-content">
              <a href="./login.html">登录</a>
              <a href="./baogao.html">报告</a>
              <a href="https://y.qq.com/?ADTAG=myqq#type=index">主题曲</a>
            </div>
          </li>
          <div class="nav-box"></div>
        </ul>
      </div>
    </div>
    <section>
      <div>
        <h1>一、人员信息：</h1>
        <br />
        <table>
          <tr>
            <td>组长/成员姓名</td>
            <td>学号</td>
            <td>班级</td>
          </tr>
          <tr>
            <td>胡芷奕</td>
            <td>0223438</td>
            <td>软件2213班</td>
          </tr>
        </table>
      </div>
      <br /><br />
      <div>
        <div><h1>二、网站介绍：</h1></div>
        <br />
        <div>
          <h2>
            1、主题：<span>治愈空间 —— 简单介绍从小到大喜欢的治愈系动漫。</span>
          </h2>
        </div>
        <div>
          <h2>
            2、选题目的：<span
              >画风治愈、内容治愈的动漫让人身心愉悦，希望让看到这个网站的人感到轻松，释放压力。</span
            >
          </h2>
        </div>

        <br /><br /><br />
        <div><h1>三、网站设计：</h1></div>
        <br />
        <div>
          <h2>含实验报告在内共6张网页：</h2>
        </div>
        <br />
        <div>
          <div>
            &nbsp;&nbsp;3张页面分别介绍《龙猫》、《国王排名》及新海诚的作品;<br />
          </div>
          <div>&nbsp;&nbsp;1张页面以轮播图作为图片小展;<br /></div>
          <div>&nbsp;&nbsp;1张登录页面;<br /></div>
          <div>&nbsp;&nbsp;1张报告页面;</div>
        </div>

        <br /><br /><br />
        <div><h1>四、网站内容：</h1></div>
        <br />
        <div>
          <h2>1、新海诚作品页面：</h2>
        </div>
        <br />
        <div>
          <div><h3>（1）运用 float + clear 实现精美布局</h3></div>
          <div><img src="img2/新海诚.jpeg" alt="" /></div>
          <div>
            <br />
            <h3>（2）运用 js + css 实现页面的跳转（亮点）</h3>
            <br />
          </div>
          <div>
            <video src="img2/新海诚.mp4" controls></video>
          </div>
        </div>
        <div>
          <br /><br />
          <h2>2、《国王排名》页面：</h2>
        </div>
        <div>
          <div>
            <br />
            <h3>（1）运用 js + css 实现精美的视频播放效果（亮点）</h3>
            <br />
          </div>
          <div>
            <video src="img2/国王.mp4" controls></video>
          </div>
          <div>
            <br />
            <h3>（2）大量使用 flex 布局，但效果不明显</h3>
            <br />
          </div>
        </div>
        <div>
          <br /><br />
          <h2>3、《龙猫》页面：</h2>
        </div>
        <div>
          <br />
          <h3>（1）运用 js + css 实现精美的侧边栏按钮（亮点）</h3>
          <br />
        </div>
        <div>
          <video src="img2/侧边栏.mp4" controls></video>
        </div>
        <div>
          <br />
          <h3>（2）运用 js + css 实现精美的手风琴样式和名片放大效果（亮点）</h3>
          <br />
        </div>
        <div>
          <video src="img2/放大.mp4" controls></video>
        </div>
        <div>
          <br />
          <h3>（3）大量使用 flex 布局，且有较为明显的效果（亮点）</h3>
          <br />
        </div>
        <div>
          <br />
          <h3>（4）运用 table 标签制作了一个细致的表格</h3>
          <br />
        </div>
        <div>
          <video src="img2/表格.mp4" controls></video>
        </div>
        <div>
          <br /><br />
          <h2>4、图片小展：</h2>
        </div>
        <div>
          <br />
          <h3>
            （1）运用 js + css 实现特别的图片轮播效果（亮点）<br />&nbsp;&nbsp;&nbsp;&nbsp;
            ps：轮播动画的设置费了一番功夫
          </h3>
          <br />
        </div>
        <div>
          <video src="img2/轮播.mp4" controls></video>
        </div>
        <div>
          <br /><br />
          <h2>5、登录页面：</h2>
        </div>
        <div>
          <br />
          <h3>
            （1）运用 js + css
            实现注册与登录的切换，点击登录或切换可进入报告界面（亮点）
          </h3>
          <br />
        </div>
        <div>
          <video src="img2/login.mp4" controls></video>
        </div>
        <div>
          <br /><br />
          <h2>6、精美导航栏（以龙猫页面的最为精美）：</h2>
        </div>
        <div>
          <br />
          <h3>
            鼠标移上去可以发现字体略微放大，文字设有倒影，链接下方出现颜色条，细节满满！
          </h3>
          <br />
        </div>
        <div>
          <video src="img2/导航栏.mp4" controls></video>
        </div>
        <br /><br /><br />
        <div><h1>五、总结：</h1></div>
        <br />
        <div>
          <span
            >&nbsp;&nbsp;&nbsp;&nbsp;整个网站细节满满，链接变色，字体样式，字体大小，盒子边框，盒子大小，等等等等都是一点一点改出来的，费尽了我的心血和我为数不多的头发，
            我先设计好网站的主题和框架，又在B站和w3school上进行了更深入的学习，不停敲敲改改完成了自己的小网站，所学内容都有意识地去使用了，也没有局限于课堂上所学的内容
            学了敲，敲了学，对html，css，js都有了更多的了解，虽然有时心好累，但敲起来还是兴致勃勃，虽然还有很多需要学习的内容，但我比较满意自己这次的作业。
            <h3>最后，感谢老师，感谢w3school，感谢B站！</h3>
          </span>
        </div>
        <br /><br /><br />
        <div>
          <h1>六、展望：自己对这门课程很感兴趣，会继续一直学习下去！</h1>
        </div>
        <br />
      </div>
    </section>
  </body>
</html>
